<template>
  <NuxtLayout>
    <el-breadcrumb class="my-crumb">
      <el-breadcrumb-item v-for="(item, index) in crumbData" :key="index">
        <a :href="item.href">{{ item.title }}</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="con">
      <div class="con-cen">
        <CourseTabs :options="subjectData" />
        <div class="con-cen-crumbs">课程列表</div>
        <CourseList :options="listData" />
        <div class="pagin">
          <el-pagination background layout="prev, pager, next, total" :page-size="listForm.pageSize" :total="totalData"
            v-model:current-page="listForm.pageNum" @change="pageChangeFn" hide-on-single-page />
        </div>
      </div>
    </div>
  </NuxtLayout>
</template>

<script setup>
import { getQuestionListApi, getLessonListApi } from "~/server/api";
import { treeFn } from "~/utils/utils";
import { useCountStore } from "~/store/counter.js";
useCountStore().$patch({
  indexActive: 3,
});
const crumbData = ref([
  { title: '首页', href: '/' },
  { title: '课程中心', href: 'javascript:;' },
])
// 路由验证
definePageMeta({
  validate: async (route) => {
    let flag = true;
    route.params.all.forEach(item => {
      if (!/^1\d{5,}$/.test(item)) {
        flag = false;
        return;
      }
    })
    return flag;
  }
})
// TDK
const prevHost = useRequestHeaders()["x-forwarded-proto"];
const host = useRequestHeaders()["host"];
const fullPath = useRoute()["fullPath"];
useSeoMeta({
  title: "课程中心",
  keywords: "课程中心",
  description: "课程中心",
  ogTitle: "课程中心",
  ogDescription: "课程中心",
  ogType: "article",
  ogUrl: `${prevHost}://${host}${fullPath}`,
});
const all = useRoute().params.all;
// 获取科目
const subjectData = ref([]);
const getSubject = async () => {
  let { data: subjectRes } = await useAsyncData("getQuestionListApi", () =>
    useServerRequest(getQuestionListApi, {
      method: "post",
      body: JSON.stringify({
        pageNum: 1,
        pageSize: 666,
        courseOpen: true,
      }),
    })
  );
  if (subjectRes.value && subjectRes.value.errno === 0 && subjectRes.value.result && subjectRes.value.result.list.length > 0) {
    let treeArr = treeFn(subjectRes.value.result.list, 0, []);
    treeArr.forEach(item => {
      if (item.level == 1 && item.children && item.children.length > 0) {
        subjectData.value.push(...item.children)
      }
    })
    return false;
  }
};
getSubject();
// 获取课程列表
const listData = ref([]);
const listForm = ref({
  pageNum: parseInt(useRoute().query.p) || 1,
  pageSize: 24,
  subjectId: all ? all[2] || all[1] || all[0] : "",
  keyword: useRoute().query.search || ''
});
const totalData = ref(0);
const getList = async () => {
  let { data: listRes } = await useAsyncData("getLessonListApi", () =>
    useServerRequest(getLessonListApi, {
      method: "post",
      body: JSON.stringify(listForm.value),
    })
  )
  if (listRes.value && listRes.value.errno === 0 && listRes.value.result && listRes.value.result.list.length > 0) {
    listData.value = listRes.value.result.list;
    totalData.value = listRes.value.result.total;
    return false;
  }
};
getList();
// 分页
const pageChangeFn = (val) => {
  let href = "/curriculum";
  if (all && all[0]) {
    href += `/${all[0]}`;
  }
  if (all && all[1]) {
    href += `/${all[1]}`;
  }
  if (all && all[2]) {
    href += `/${all[2]}`;
  }
  location.href = `${href}?search=${useRoute().query.search || ''}&p=${val}`;
};
</script>

<style lang="less" scoped>
.con {
  min-height: calc(100vh - 454px);
  padding: 20px;

  &-cen {
    width: 1200px;
    margin: 0 auto;

    &-crumbs {
      margin-top: 40px;
      font-weight: bold;
      font-size: 24px;
    }
  }
}

.pagin {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
</style>
